<template>
    <div class="login">
        <h1>XINHUANXIANG</h1>
        <div class="form">
            <div class="title">账号登录</div>
            <div class="flexBox van-hairline--surround">
                <input type="text" v-model="form.mobile" placeholder="请输入手机号码" />
            </div>
            <div class="flexBox van-hairline--surround">
                <input type="text" v-model="form.captcha" placeholder="验证码" />
                <button :class="active" v-if="tt">{{num}}s</button>
                <button :class="{active:!form.captcha}" v-else @click="getSMS">获取验证码</button>
            </div>
            <button class="submit" :class="{active:form.mobile && form.captcha}" @click="login">登录</button>
        </div>
    </div>
</template>
<script>
import { setCookie } from '@/utils/cookie.js'
export default {
    data () {
        return {
            form: {
                mobile: 18944229751,
                captcha: ''

            },
            tt: '',
            num: 60
        }
    },
    methods: {
        login () {
            let form = this.form
            if (form.mobile && form.captcha) {
                this.$model.comm.login(form).then(res => {
                    if (res.code != 1) {
                        this.$toast(res.msg);
                    } else {
                        this.$toast('登录成功');
                        setCookie('userinfo', res.data.userinfo)
                        let redirect = this.$route.query.redirect
                        if(redirect){
                            this.$router.replace(redirect)
                        }else{
                            this.$router.replace('/index')
                        }
                    }
                })

            } else {
                this.$toast('请输入手机号或者验证码');
            }
        },
        getSMS () {
            if (!this.tt) {
                let form = this.form
                if (!form.mobile) {
                    return this.$toast('请输入手机号');
                }
                this.$model.comm.getSMS({ mobile: form.mobile, event: 'login' }).then(res => {
                    console.log(res)
                    if (res.code != 1) {
                        this.$toast(res.msg);
                    } else {
                        this.$toast('发送成功');
                        this.num = 60
                        this.tt = setInterval(() => {
                            this.num--
                            if (this.num <= 0) {
                                clearInterval(this.tt)
                                this.tt = null
                            }
                        }, 1000)
                    }
                })
            }
        }
    }
}
</script>
<style lang="less" scoped>
.login {
    height: 100%;
    // background: orange;
    overflow: hidden;
    color: #ffffff80;
    h1 {
        text-align: center;
        font-weight: normal;
        font-family: serif;
        color: #fff;
        margin: 80 / 2px 0 40 / 2px;
    }
    .form {
        width: 80%;
        margin: 40 / 2px auto;
        .submit {
            display: block;
            width: 100%;
            margin-top: 250 / 2px;
            text-align: center;
            background: @bgcolor;
            height: 100 / 2px;
            border-radius: 80 / 2px;
            border: none;
            &.active {
                color: #333;
                background: @yellow;
            }
        }
        .title {
            text-align: center;
            padding-bottom: 150 / 2px;
            font-size: 32 / 2px;
        }
        .flexBox {
            display: flex;
            align-items: center;
            margin-top: 40 / 2px;
            overflow: hidden;
            &::after {
                border-radius: 120 / 2px;
                border-color: @bgcolor;
            }
            input {
                flex: 1;
                border: none;
                height: 60px;
                background: transparent;
                padding: 0 40 / 2px;
                width: 0;
                color: #fff;
            }
            button {
                background: @bgcolor;
                border-radius: 80 / 2px;
                height: 70 / 2px;
                border: none;
                padding: 0 50 / 2px;
                white-space: nowrap;
                margin-right: 20 / 2px;
                font-size: 24 / 2px;
                &.active {
                    color: #333;
                    background: @yellow;
                }
            }
        }
    }
}
</style>
